<div class="app-loader" *ngIf="loading">
    <span nz-icon [nzType]="'loading'"></span>CDS is loading
</div>

<div class="app" *ngIf="!loading">
    <div class="page"
        *ngIf="!isAPIAvailable || (maintenance && isConnected && currentAuthSummary?.user?.ring !== 'ADMIN')">
        <div class="content">
            <div class="wrapper loading">
                <app-scrollview class="scrollview">
                    <nz-row nzJustify="center">
                        <nz-col class="center">
                            <img class="logo image grayscale" src="assets/images/cds.png" alt="CDS Logo">
                            <p *ngIf="!isAPIAvailable">{{ 'cdsapi_loading' | translate }}</p>
                            <p *ngIf="isAPIAvailable">{{ 'maintenance_title' | translate }}</p>
                        </nz-col>
                    </nz-row>
                </app-scrollview>
            </div>
        </div>
    </div>

    <ng-container
        *ngIf="isAPIAvailable && (!isConnected || !maintenance || currentAuthSummary?.user?.ring === 'ADMIN')">
        <nz-layout>
            <nz-header>
                <app-navbar></app-navbar>
            </nz-header>
            <nz-content>
                <div class="banner"
                    *ngIf="(maintenance) && (!isConnected || currentAuthSummary?.user?.ring === 'ADMIN')">
                    {{ 'maintenance_title' | translate }}
                </div>
                <div class="banner update" (click)="refresh()" *ngIf="showUIUpdatedBanner">
                    {{ 'ui_updated' | translate }}
                </div>
                <div class="page" [class.connected]="isConnected && !hideNavBar">
                    <div class="content inner-content" [class.connected]="isConnected && !hideNavBar">
                        <router-outlet></router-outlet>
                        <nz-spin nzTip="Loading..." *ngIf="displayResolver"></nz-spin>
                    </div>
                </div>
                <app-node-edit-modal></app-node-edit-modal>
            </nz-content>
        </nz-layout>
    </ng-container>
</div>
<ng-template #templateRootToast let-data="data">
    <div class="toastTitle">
        <i nz-icon nzType="exclamation-circle" class="ant-notification-notice-icon-error"></i>
        {{data.title}}
    </div>
    <span *ngIf="data.from">{{data.from}}<br /></span>
    <div *ngIf="data?.help && data?.help?.length > 0">
        <markdown [data]="data.help"></markdown>
    </div>
    <span>
        {{'toast_http_error_request_id' | translate}}
        <pre style="font-size: 10px">{{data.request_id}}</pre>
    </span>
</ng-template>